<template>
  <!--
		1.具备输入框的样式
		2.不可输入
		3.placeholder 内容可以在父组件定义
	 -->
  <view class="my-search-container">
    <!-- 搜索输入框 -->
    <uni-search-bar
      class="my-search-bar"
      v-if="isShowInput"
      :radius="100"
      :bgColor="config.backgroundColor"
      :placeholder="placeholderText"
      :value="value"
      @confirm="onConfirm"
      @blur="onBlur"
      @focus="onfocus"
      @clear="onClear"
      @cancel="onCancel"
      @input="onInput"
    >
      <uni-icons slot="clearIcon" type="clear" color="#999999" />
    </uni-search-bar>
    <!-- 搜索 -->
    <view
      class="my-search-box"
      :style="{
        height: config.height + 'px',
        backgroundColor: config.backgroundColor,
        border: config.border
      }"
      v-else
    >
      <!-- 搜索图标 -->
      <image class="icon" src="../../static/images/search.png" mode="aspectFit"></image>
      <!-- placeholder -->
      <text
        class="placeholder"
        :style="{
          color: config.textColor
        }"
        >{{ placeholderText }}</text
      >
    </view>
  </view>
</template>

<script>
export default {
  name: 'my-search',
  props: {
    // 输入的内容
    // search-bar 不可以使用v-model,因为直接使用 v-model 会修改父组件传递过来的数据
    value: {
      type: String
    },
    // 是否显示输入框
    isShowInput: {
      type: Boolean,
      default: false
    },
    // 配置对象
    config: {
      type: Object,
      default: () => ({
        height: 36,
        backgroundColor: '#ffffff',
        icon: '/static/images/search.png',
        textColor: '#454545',
        border: '1px solid #c9c9c9'
      })
    },
    placeholderText: {
      type: String,
      default: '搜索'
    }
  },
  data() {
    return {}
  },
  methods: {
    /**
     * uniSearchBar 的输入框 confirm 事件，返回参数为uniSearchBar的value
     * */
    onConfirm() {
      this.$emit('Confirm', this.value)
    },
    /**
     * input 失去焦点时触发事件，返回参数为uniSearchBar的value
     * */
    onBlur() {
      this.$emit('Blur', this.value)
    },
    /**
     * input 获取焦点时触发事件，返回参数为uniSearchBar的value
     * */
    onfocus() {
      this.$emit('focus', this.value)
    },
    /**
     * 点击清除按钮时触发事件，返回参数为uniSearchBar的value
     * */
    onClear() {
      this.$emit('Clear', this.value)
    },
    /**
     * 点击取消按钮时触发事件，返回参数为uniSearchBar的value
     * */
    onCancel() {
      this.$emit('Cancel', this.value)
    },
    /**
     * uniSearchBar 的 value 改变时触发事件，返回参数为uniSearchBar的value
     * */
    onInput(val) {
      // 通知父组件的值
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss">
.my-search-container {
  display: flex;
  align-items: center;
  .my-search-bar {
    width: 100%;
  }
  .my-search-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 30px;
    padding: 0 $uni-spacing-row-base;
    background-color: $uni-bg-color;
    border-radius: 15px;
    border: 1px solid $uni-bg-color-border;
    .icon {
      width: $uni-img-size-sm;
      flex: 1;
      height: $uni-img-size-sm;
    }
    .placeholder {
      flex: 11;
      font-size: $uni-font-size-sm;
      margin-left: $uni-spacing-row-sm;
      color: $uni-text-color-placeholder;
    }
  }
}
</style>
